import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './DiscoverPage.css';
import './LivesPage.css';
import LiveCard from './LiveCard';
import './LiveCard.css';

// 直播列表数据（扩展了更多数据）
const liveList = [
  {
    id: 101,
    cover: '/10.jpg',
    title: '天津 摇滚不死',
    location: '天津',
    viewer: 420,
    category: ['音乐', '推荐']
  },
  {
    id: 102,
    cover: '/11.jpg',
    title: '北京 街头艺人',
    location: '北京',
    viewer: 666,
    category: ['音乐', '推荐']
  },
  {
    id: 103,
    cover: '/12.jpg',
    title: '上海 时尚穿搭分享',
    location: '上海',
    viewer: 823,
    category: ['时尚', '推荐']
  },
  {
    id: 104,
    cover: '/13.jpg',
    title: '广州 美食探店',
    location: '广州',
    viewer: 1254,
    category: ['美食', '推荐']
  },
  {
    id: 105,
    cover: '/14.jpg',
    title: '成都 街头表演',
    location: '成都',
    viewer: 987,
    category: ['舞蹈', '推荐']
  },
  {
    id: 106,
    cover: '/6.jpg',
    title: '杭州 西湖风光',
    location: '杭州',
    viewer: 765,
    category: ['旅行', '推荐']
  },
  {
    id: 107,
    cover: '/7.jpg',
    title: '武汉 夜市美食',
    location: '武汉',
    viewer: 890,
    category: ['美食', '推荐']
  },
  {
    id: 108,
    cover: '/9.jpg',
    title: '南京 古城探秘',
    location: '南京',
    viewer: 650,
    category: ['旅行', '推荐']
  },
  {
    id: 109,
    cover: '/10.jpg',
    title: '重庆 火锅达人',
    location: '重庆',
    viewer: 1100,
    category: ['美食', '推荐']
  },
  {
    id: 110,
    cover: '/11.jpg',
    title: '苏州 园林漫步',
    location: '苏州',
    viewer: 720,
    category: ['旅行', '推荐']
  },
  {
    id: 111,
    cover: '/12.jpg',
    title: '深圳 电音派对',
    location: '深圳',
    viewer: 880,
    category: ['音乐', '推荐']
  },
  {
    id: 112,
    cover: '/13.jpg',
    title: '西安 古城墙下的朝暮',
    location: '西安',
    viewer: 730,
    category: ['旅行', '推荐']
  },
  {
    id: 113,
    cover: '/14.jpg',
    title: '哈尔滨 冰雪奇缘',
    location: '哈尔滨',
    viewer: 950,
    category: ['旅行', '推荐']
  },
  {
    id: 114,
    cover: '/6.jpg',
    title: '厦门 沙滩音乐节',
    location: '厦门',
    viewer: 1050,
    category: ['音乐', '推荐']
  },
  {
    id: 115,
    cover: '/7.jpg',
    title: '青岛 啤酒狂欢',
    location: '青岛',
    viewer: 1200,
    category: ['美食', '推荐']
  },
  {
    id: 116,
    cover: '/9.jpg',
    title: '三亚 海边瑜伽',
    location: '三亚',
    viewer: 680,
    category: ['健身', '推荐']
  }
];

// 分类数据
const categories = [
  '推荐', '附近', '游戏', '音乐', '舞蹈', '美食', '旅行', '时尚', '宠物', '搞笑', '科技', '体育', '健身'
];

const LivesPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  // 获取从上一个页面传递的分类
  const initialCategory = location.state?.category || '推荐';
  
  // 找到分类的索引
  const categoryIndex = categories.findIndex(cat => cat === initialCategory);
  
  // 设置活动分类，如果没有找到匹配的则默认为0（推荐）
  const [activeCategory, setActiveCategory] = useState(categoryIndex !== -1 ? categoryIndex : 0);
  const [refreshing, setRefreshing] = useState(false);
  const [lives, setLives] = useState(liveList);
  const [filteredLives, setFilteredLives] = useState([]);
  const [isGridView, setIsGridView] = useState(true); // 网格或列表视图的状态

  // 当分类切换时筛选直播
  useEffect(() => {
    const selectedCategory = categories[activeCategory];
    
    // 筛选符合当前分类的直播
    const newFilteredLives = lives.filter(live => 
      live.category.includes(selectedCategory)
    );
    
    setFilteredLives(newFilteredLives);
  }, [activeCategory, lives]);

  // 处理刷新
  const handleRefresh = () => {
    setRefreshing(true);
    
    // 模拟刷新操作
    setTimeout(() => {
      // 随机打乱直播顺序
      const shuffledLives = [...lives].sort(() => Math.random() - 0.5);
      setLives(shuffledLives);
      
      setRefreshing(false);
    }, 800);
  };

  // 返回上一页
  const handleBack = () => {
    navigate(-1);
  };
  
  // 切换视图模式
  const toggleViewMode = () => {
    setIsGridView(!isGridView);
  };

  return (
    <div className="lives-page">
      {/* 头部导航栏 */}
      <div className="lives-header">
        <div className="back-button" onClick={handleBack}>
          <span>&#10094;</span>
        </div>
        <div className="page-title">热门直播</div>
        <div className="view-toggle" onClick={toggleViewMode}>
          {isGridView ? '列表' : '网格'}
        </div>
      </div>
      
      {/* 分类选项卡 */}
      <div className="category-tabs">
        {categories.map((category, index) => (
          <div 
            key={index} 
            className={`category-tab ${index === activeCategory ? 'active' : ''}`}
            onClick={() => setActiveCategory(index)}
          >
            {category}
            {index === activeCategory && <div className="category-indicator"></div>}
          </div>
        ))}
      </div>
      
      {/* 内容区域 */}
      <div className="lives-content">
        {filteredLives.length > 0 ? (
          <div className={isGridView ? "lives-grid" : "lives-list"}>
            {filteredLives.map(live => (
              <div key={live.id} className="live-card-container">
                <LiveCard live={live} />
              </div>
            ))}
          </div>
        ) : (
          <div className="empty-content">
            <div className="empty-icon">🔍</div>
            <div className="empty-text">当前分类暂无直播</div>
          </div>
        )}
      </div>
      
      {/* 刷新按钮 */}
      <div className={`refresh-btn ${refreshing ? 'refreshing' : ''}`} onClick={handleRefresh}>
        {refreshing ? '↻' : '↻'}
      </div>
    </div>
  );
};

export default LivesPage; 